<template>
	<view class="base">
		<view class="form">
			<view class="form-item">
				<view class="">
					<text>手</text><text>机</text><text>号</text>:
				</view>
				<input type="number" id="" placeholder="请输入手机号" v-model.trim="mobile">
			</view>
			<view class="form-item security">
				<view class="">

					<text>验</text><text>证</text><text>码</text>:
				</view>
				<input type="text" value="" placeholder="请填写验证码" v-model.trim="code" /> <button
					@click="getCode">{{countDown}}</button>
			</view>
			<view class="form-item">
				<view class="">
					<text>密</text><text>码:</text>
				</view>
				<input type="password" placeholder="请输入密码" v-model.trim="password">
			</view>
			<view class="agreement">
				<checkbox-group class="checkbox-group" @change="changeChecked">
					<checkbox class="checkbox" style="transform:scale(0.7)" color="#000" :checked="checked" />
					<text class="checkbox-text"> 用户协议</text>
				</checkbox-group>
			</view>
		</view>
		<button class="register" @click="register">注册</button>
	</view>
</template>

<script>
	import {
		sendCode,
		reg
	} from '@/api/system/user.js'
	export default {
		data() {
			return {
				mobile: '',
				code: '',
				password: '',
				countDown: '获取验证码',
				checked: false
			}
		},
		methods: {
			getCode() {
				if (this.countDown == '获取验证码') {
					if (this.mobile.length != 11) return this.$modal.msgError('手机号格式错误')
					this.$modal.showToast('正在发送验证码')
					const data = {
						mobile: this.mobile
					}
					sendCode(data).then(res => {
						this.$modal.msg('验证码已发送,请接受')
						this.countDown = 60
						this.timer = setInterval(() => {
							this.countDown -= 1
							if (this.countDown == 0) {
								clearTimeout(this.timer);
								this.countDown = '获取验证码'
							}
						}, 1000)
						if (res.status == 200) {
							this.code = data
						} else {
							this.$modal.showToast(res.msg)

						}
					})
				}


			},
			register() {
				if (this.mobile.length !== 11 || this.code == '' || this.password == '') return this.$modal.msgError(
					'请认真检查信息')
				if (this.checked != true) return this.$modal.msgError(
					'请同意用户协议')
				const data = {
					mobile: this.mobile,
					password: this.password,
					code: this.code
				}
				reg(data).then(res => {
					if (res.code == 200) {
						this.$modal.msgSuccess('注册成功')
						setTimeout(() => {
							this.$modal.hideMsg()
							clearTimeout(this.timer);
							this.$tab.navigateBack()
						}, 1000)
					} else {
						this.$modal.msgError('数据请求失败')
					}
				})
			},
			changeChecked() {
				this.checked = !this.checked
			}
		}
	}
</script>

<style lang="scss">
	page {
		margin: 0;
		padding: 0;
		background-color: rgba(239, 243, 245, 1);
	}

	.form {
		margin-top: 50rpx;

		.form-item {
			height: 100rpx;
			width: 100%;
			display: flex;
			background-color: #fff;
			border: 1px solid rgba(230, 230, 230, 1);

			view {
				display: flex;
				justify-content: space-between;
				width: 100rpx;
				line-height: 100rpx;
				margin-right: 20rpx;
				margin-left: 50rpx;
				font-weight: 600;
				color: rgba(16, 16, 16, 1);
				font-size: 28rpx;
				text-align: right;
			}

			input {
				width: 550rpx;
				height: 100rpx;
				line-height: 100rpx;
				margin-left: 30rpx;
			}

		}

		.security {
			input {
				width: 310rpx;
			}

			button {
				width: 180rpx;
				height: 70rpx;
				padding: 0;
				margin: 15rpx 20rpx 0;
				border-radius: 8rpx;
				background-color: rgba(101, 168, 242, 1);
				color: rgba(255, 255, 255, 1);
				font-size: 28rpx;
				text-align: center;
			}
		}

		.agreement {
			margin: 20rpx 80rpx;
			vertical-align: text-top;
			color: rgba(101, 168, 242, 1);
			font-size: 30rpx;

			.checkbox,
			.checkbox-text {
				vertical-align: middle;
			}

			.checkbox::before {
				width: 100%;
				height: 100%;
				line-height: 100%;
				text-align: center;
				content: '√';
				right: 0;


			}
		}
	}

	.register {
		width: 600rpx;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 8rpx;
		background-color: rgba(101, 168, 242, 1);
		color: rgba(255, 255, 255, 1);
		font-size: 32rpx;
		margin: 200rpx auto;
		text-align: center;
	}
</style>
